<style>
</style>
<template>
    <ly-page>
        <ly-navi title="操作指引"></ly-navi>
        <ly-page-content>

            <el-divider content-position="left">默认</el-divider>

            <el-button guide-group="layout" :guide-content="guide_text" guide-placement="bottom"  @click="showGuide" type="primary" v-mb>显示指引</el-button>
            <ly-tip  guide-placement="top" guide-content="测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容" guide-title="测试标题"    type="success" border>
                <p  guide-placement="top" guide-content="测试内容" >
                   点击下一条,和点击空白位置都能显示下一条
                </p>
                <p  :guide-content="guide_text" guide-placement="left" >
                    点击关闭,会跳过所所有剩下的指引
                </p>
            </ly-tip>
            <el-form :guide-content="guide_text"   :model="form"  label-width="125px" size="small">
                <el-form-item :guide-content="guide_text"   label="商品名称" prop="name">
                    <el-input :guide-content="guide_text"   placeholder="请填写商品名称" v-model="form.name"></el-input>
                    <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
                </el-form-item>


                <el-form-item label="长文本说明" prop="desc">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                    <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
                </el-form-item>
            </el-form>

            <ly-form-view ref="guide1" title="默认类型">
                <ly-form-line>
                    <ly-info label="订单金额">10000</ly-info>
                    <ly-info label="订单金额">10000</ly-info>
                </ly-form-line>
                <ly-form-line :guide-content="guide_text" >
                    <ly-info label="订单金额">10000</ly-info>
                    <ly-info label="已付款">10000</ly-info>
                </ly-form-line>
                <ly-form-line>
                    <ly-info label="未付款">0</ly-info>
                    <ly-info label="付款日期">2019-11-09</ly-info>
                </ly-form-line>
                <ly-info label="协议生效日期">2019-11-09</ly-info>

            </ly-form-view>
            <ly-markdown>
              <pre v-pre>

            #### Attributes

            | 属性名  |说明   | 类型|可选值|默认值|
            | ------------ | ------------ |------------ |------------ |------------ |
            |  guide-title| 显示标题	  |string |-	|-|
            |  guide-content | 显示内容	  |string|-	|-|
            |  guide-placement | 显示位置	 |string |top,left,right,bottom	|bottom	|
            |  guide-group | 分组   |string|-	|默认不分组|
            |  guide-level | 排序   |int|-	|默认排序是按元素位置排的|
            ## 全局对象 `Ly.guide`

            #### Attributes

            | 属性名  |说明   | 参数说明|
            | ------------ | ------------ |------------ |
            |  Ly.guide.show(option) | 显示指导	 |can_finish:是否显示关闭按钮,callback:,, |
            |  Ly.guide.hide()| 关闭指导	  |- |

            #### option
            | 属性名  |说明   |
            | ------------ | ------------ |
            |  can_finish | 是否显示关闭按钮	 |
            |  group | 分组	 |
            |  callback|结束回调, 回调参数 表示是否完整 观看	  |
            |  guides|通过配置项配置的引导	 |
            |  guides[].selector| 为 元素选择器|
            |  guides[].el| 为 元素  el和selector必须有一个|
            |  guides[].content|显示内容|
            |  guides[].title|显示标题|
            |  guides[].level|排序|
            |  guides[].group|分组|
            |  guides[].placement|显示位置|


              </pre>
            </ly-markdown>


        </ly-page-content>

    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {
                    form:{},
                    guide_text:'测试内容<a href="http://baidu.com" target="_blank">链接</a>',
                    count: 1235
                }
            },
            created: function () {
                var me=this;
                var finish=localStorage.getItem('guide-finish')
                if(finish!=='true'){
                    setTimeout(function (){
                        me.showGuide();
                    },1000)
                }
            },
            methods: {
                showGuide:function (){
                    Ly.guide.show({
                        guides:[
                                {  selector:'.sidebar-menu [role-code="demo_form"]',
                                    content:'表单模块在这里',
                                    placement:'right',
                                    group:'layout'
                                },
                                {
                                    selector: '.submenu-menu-item [rap-link="/comp/guide"]',
                                    content:'新增加的操作指引组件',
                                    placement:'right'
                                },{
                                    selector: '.submenu-menu-item [rap-link="/chart/line"]',
                                    content:'我们的折线图写法很简单',
                                }
                                ,{
                                    el: this.$refs.guide1.$el,
                                    content:'我们的折线图写法很简单',

                                }
                            ],
                            can_finish:true,
                            callback:function (finish){
                                if(finish){
                                    localStorage.removeItem('guide-finish');
                                    App.$confirm('以后不再显示操作指引').then(function (){
                                        localStorage.setItem('guide-finish','true');
                                    });

                                }else{
                                    return App.$confirm('你确定关闭指引吗');
                                }
                            }
                        });
                }
            }
        }
    })
</script>